<template>
    <view class="content">
        <u-navbar title="我是商家"  :autoBack="true">
                </u-navbar>
        <view class="info">
            
            <view class="logo">
                <image :src="vuex_user.avatar"></image>
            </view>
            
            <view class="s1">
                <view class="c1">{{ vuex_user.nickname }}</view>
                <view class="c1">当前账户余额 <text>{{ info.userInfo.all_withdraw_money - info.userInfo.done_withdraw_money }}元</text></view>
                <view class="c1">到期时间：{{ vuex_user.shop_end_time }}</view>
                <view class="but">
                    <view class="c2" @click="goPayhistory()">续 费</view>
                    <view class="c2" @click="goRequest()">提 现</view>
                </view>
            </view>
            
        </view>
        
        <view class="item">
            
            <view class="s1">
                
                <view class="c1">
                    <text>{{ info.order_count }}</text>
                    <text>总订单数</text>
                </view>
                
                <view class="c1">
                    <text>{{ info.userInfo.all_withdraw_money }}</text>
                    <text>总金额</text>
                </view>
                
                <view class="c1">
                    <text>{{ info.userInfo.done_withdraw_money }}</text>
                    <text>已经提现</text>
                </view>
                
            </view>
            
            <view class="s2">
                
                <u-cell-group :border='false'>
                    <u-cell :border='false' url='/pages/activity/order' title="我的订单" :isLink='true'></u-cell>
                    <u-cell :border='false' url='/pages/merchant/request_log' title="提现记录" :isLink='true'></u-cell>
                </u-cell-group>
                
            </view>
            
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: {}
            };
        },
        onShow() {
            this.getInfo();
        },
        methods: {
            getInfo() {
                this.$API.getMerchantCount().then(res => {
                    this.info = res.data;
                    this.$u.vuex('vuex_user', res.data.userInfo);
                })
            },
            goPayhistory() {
                uni.navigateTo({
                    url: '/pages/merchant/payhistory'
                })
            },
            goRequest() {
                uni.navigateTo({
                    url: '/pages/merchant/request'
                })
            }
        }
    }
</script>

<style lang="scss">
.content {
    width: 670rpx;
    margin: 0 auto;
    
    .info {
        width: 590rpx;
        padding: 52rpx 40rpx;
        margin-top: 52rpx;
        background-color: #fff;
        border-radius: 48rpx;
        @include flex;
        
        .logo {
            width: 136rpx;
            
            image {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
            }
        }
        
        .s1 {
            @include flex(column);
            .c1 {
                height: 34rpx;
                font-size: 24rpx;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: 400;
                color: #000000;
                line-height: 34rpx;
                margin-bottom: 8rpx;
                &:nth-child(1) {
                    font-size: 28rpx;
                }
                &:nth-child(2) {
                    text {
                        color: #7677EB;
                        margin-left: 8rpx;
                        font-weight: bold;
                    }
                }
            }
            
            .but {
                @include flex;
                justify-content: space-between;
                margin-top: 40rpx;
                
                .c2 {
                    width: 206rpx;
                    height: 88rpx;
                    background: #7677EB;
                    box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63,140,255,0.2637);
                    border-radius: 28rpx;
                    opacity: 1;
                    border: 2rpx solid #7677EB;
                    text-align: center;
                    line-height: 88rpx;
                    color: #fff;
                    
                    &:nth-child(2) {
                        background-color: #fff;
                        margin-left: 40rpx;
                        color: #7677EB;
                    }
                }
            }
        }
    }
    
    .item {
        width: 590rpx;
        padding: 52rpx 40rpx;
        background-color: #fff;
        margin-top: 52rpx;
        border-radius: 48rpx;
        
        .s1 {
            @include flex;
            justify-content: space-between;
            
            .c1 {
                @include flex(column);
                text-align: center;
                text {
                    &:nth-child(1) {
                        height: 48rpx;
                        font-size: 36rpx;
                        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                        font-weight: 600;
                        color: #0A1629;
                        line-height: 48rpx;
                        margin-bottom: 18rpx;
                    }
                    &:nth-child(2) {
                        height: 34rpx;
                        font-size: 28rpx;
                        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                        font-weight: 400;
                        color: #91929E;
                        line-height: 34rpx;
                    }
                }
            }
        }
        
        .s2 {
            width: 590rpx;
            background-color: #fff;
            border-radius: 48rpx;
            margin-top: 52rpx;

            /deep/ .u-cell {
                &__body {
                    padding: 30rpx 0;
                    &__content {
                        
                    }
                }
                &__title {
                    &-text {
                        font-size: 30rpx;
                        color: #000000;
                    }
                }
                &__value {
                    font-size: 24rpx;
                    color: #000000;
                }
            }
        }
    }
}
</style>
